/**
 * Created by xmgong on 2017/10/25.
 */
import React from 'react';
import {connect} from 'react-redux';
import BaseNaviLayout from '../../component/BaseNaviLayout';
import {
    Text,
    FlatList,
    View,
} from 'react-native';
import {getTransactionAction} from './actions';
import TransationItem from './transationItem';
import CLNavigatorHeader from '../../component/CLNavigatorHeader';

class TransactionList extends React.Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        header: <CLNavigatorHeader navigation={navigation} title="交易明细"/>,
    });

    constructor(props) {
        super(props);
        this.page = 1;
        this.size = 20;
        this.token = "";

        this.state = {
            isLoading: false,
            footText: "加载更多",
            hasMore: false,
            refreshing: false
        };
    }

    componentDidMount() {
        this.getTransaction();
    }

    getTransaction = () => {
        let self = this;
        const params = {
            token: this.props.token,
            page: this.page,
            size: this.size
        };

        this.props.getData1(params, function (res) {
            let foottxt = '';
            if (!res.hasMore) {
                foottxt = '加载完成';
            } else {
                foottxt = '加载更多';
            }

            self.setState({
                hasMore: res.hasMore,
                isLoading: false,
                footText: foottxt
            });
        });

    };

    _sepa = () => {
        return (<View style={{height: 10, backgroundColor: '#eee'}}></View>)
    };

    _renderItem = ({item}) => {
        return (<View>
            <TransationItem rowData={item}/>
        </View>)
    };

    _renderFooter = () => {
        return (
            <View style={{
                padding: 10,
                borderTopColor: "#eee",
                borderTopWidth: 1,
                flex: 1,
                flexDirection: 'row',
                justifyContent: 'center'
            }}>
                <Text style={{color: "gray"}}>{this.state.footText}</Text>
            </View>
        )
    };

    _onEndReached = () => {
        if (this.state.hasMore && !this.state.isLoading) {
            this.page = this.page + 1;
            this.setState({isLoading: true});
            this.getTransaction();
        }
    };


    _onRefresh = () => {
        this.page = 1;
        this.getTransaction();
    };


    render() {
        return (<FlatList
            style={{flex: 1}}
            ItemSeparatorComponent={this._sepa}
            data={this.props.transationList}
            renderItem={this._renderItem}
            ListFooterComponent={this._renderFooter}
            onEndReached={this._onEndReached}
            onEndReachedThreshold={0}
            onRefresh={this._onRefresh}
            refreshing={this.state.refreshing}
        />);
    }
}

const mapStateToProps = state => {
    return ({
        token: state.mainmodel.token,
        transationList: state.income.transationList
    });
};


const mapDispatchToProps = (dispatch) => {
    return {
        getData1: (params, success) => {
            dispatch(getTransactionAction(params, success));
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(TransactionList);